<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="121px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="预案类型"
              prop="PlanType"
              style="width: 330px"
              v-model="form.PlanType"
            >
              <!-- <el-input disabled v-model="form.PlanType" placeholder="请输入预案类型" /> -->
              <el-select v-model="form.PlanType" placeholder="请选择预案类型">
                <el-option
                  v-for="item in PlanTypeDropdownBox"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预案名称" prop="PlanName" style="width: 330px">
              <el-input v-model="form.PlanName" placeholder="请输入预案名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="事故风险"
              prop="AccidentRisk"
              style="width: 330px"
            >
              <el-input
                v-model="form.AccidentRisk"
                placeholder="请输入事故风险"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="事故类型"
              prop="AccidentType"
              style="width: 330px"
            >
              <el-select
                v-model="selectedOptions"
                multiple
                placeholder="请选择事故类型"
              >
                <el-option
                  v-for="item in Listofaccidenttypes"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="可能发生区域"
              prop="PossibleOccurArea"
              style="width: 330px"
            >
              <el-input
                v-model="form.PossibleOccurArea"
                placeholder="请输入可能发生区域"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="可能联动范围"
              prop="Possiblelinkage"
              style="width: 330px"
            >
              <el-select
                v-model="rangeOptions"
                multiple
                placeholder="请选择可能联动范围"
              >
                <el-option
                  v-for="item in Listofpossiblelinkageranges"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="可能严重程度"
              prop="PossibleSeverity"
              style="width: 330px"
            >
              <el-input
                v-model="form.PossibleSeverity"
                placeholder="请输入可能严重程度"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="可能发生时间"
              prop="PossibleTime"
              style="width: 330px"
            >
              <el-input
                v-model="form.PossibleTime"
                placeholder="请输入可能发生时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="可能影响范围"
              prop="PossibleEffectScope"
              style="width: 330px"
            >
              <el-input
                v-model="form.PossibleEffectScope"
                placeholder="请输入可能影响范围"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="可能衍生事故"
              prop="PossibleMatter"
              style="width: 330px"
            >
              <el-input
                v-model="form.PossibleMatter"
                placeholder="请输入可能衍生事故"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="事故发生范围"
              prop="AccidentScope"
              style="width: 330px"
            >
              <el-input
                v-model="form.AccidentScope"
                placeholder="请输入事故发生范围"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="事故发生区域"
              prop="AccidentArea"
              style="width: 330px"
            >
              <el-input
                v-model="form.AccidentArea"
                placeholder="请输入事故发生区域"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="事故发生设备"
              prop="AccidentPoint"
              style="width: 330px"
            >
              <el-input
                v-model="form.AccidentPoint"
                placeholder="请输入事故发生设备"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="响应等级"
              prop="Responselevel"
              style="width: 330px"
            >
              <el-select
                v-model="form.Responselevel"
                placeholder="请选择响应等级"
                @change="updateGradeName"
              >
                <el-option
                  v-for="item in Responselevellist"
                  :key="item.grade"
                  :label="item.grade"
                  :value="item.grade"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="等级名称"
              prop="Gradename"
              style="width: 330px"
            >
              <el-input
                v-model="form.Gradename"
                placeholder="请输入事故发生设备"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="注意事项" prop="Notes" style="width: 330px">
              <el-input
                v-model="form.Notes"
                placeholder="请输入注意事项"
                type="textarea"
                :rows="1"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>事故预警征兆</span>
        </div>
        <el-col :span="8">
          <el-form-item
            label="事故预警征兆"
            prop="AccidentWarnSign"
            style="width: 330px"
          >
            <el-input
              v-model="form.AccidentWarnSign"
              placeholder="请输入事故征兆"
              type="textarea"
              :rows="1"
            />
            <!-- <editor v-model="form.AccidentWarnSign" :min-height="192" /> -->
          </el-form-item>
        </el-col>
        <el-col :span="8" style="margin-left: 30px">
          <el-form-item
            label="征兆处置措施"
            prop="AccidentWarnDeal"
            style="width: 330px"
          >
            <el-input
              v-model="form.AccidentWarnDeal"
              placeholder="请输入征兆处置措施"
              type="textarea"
              :rows="1"
            />
            <!-- <editor v-model="form.AccidentWarnDeal" :min-height="192" /> -->
          </el-form-item>
        </el-col>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>具体步骤</span>
        </div>
        <el-card
          class="box-card"
          v-for="(Activity, disposalIndex) in ActivityAreaList"
          :key="disposalIndex"
          style="margin-top: 20px"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <el-row>
            <el-col :span="6">
              <div style="display: flex">
                <div
                  style="
                    line-height: 36px;
                    font-size: 15px;
                    color: #606266;
                    font-weight: 700;
                    margin-right: 10px;
                  "
                >
                  区域/设备:
                </div>
                <div style="line-height: 35px; width: 269px">
                  {{ Activity.zoneofaction }}
                </div>
                <!-- <el-select
                  disabled
                  v-model="Activity.zoneofaction"
                  placeholder="请选择区域/设备"
                  style="width: 170px"
                >
                  <el-option label="区域" value="区域"></el-option>
                  <el-option label="设备" value="设备"></el-option>
                </el-select> -->
              </div>
            </el-col>
            <el-col :span="8">
              <div style="display: flex">
                <div
                  style="
                    line-height: 36px;
                    font-size: 15px;
                    color: #606266;
                    font-weight: 700;
                    width: 101px;
                  "
                >
                  区域/地点名称:
                </div>
                <div style="line-height: 35px; width: 279px">
                  {{ Activity.AccidentArea }}
                </div>
                <!-- <el-input
                  disabled
                  v-model="Activity.AccidentArea"
                  autocomplete="off"
                  placeholder="请输入区域/地点名称"
                  style="width: 284px"
                ></el-input> -->
              </div>
            </el-col>
            <el-col :span="10">
              <div style="display: flex">
                <div
                  style="
                    line-height: 36px;
                    font-size: 15px;
                    color: #606266;
                    font-weight: 700;
                    width: 130px;
                  "
                >
                  处置措施名称:
                </div>
                <div style="line-height: 35px; width: 279px">
                  {{ Activity.MeasureName }}
                </div>
                <!-- <el-input
                  disabled
                  v-model="Activity.MeasureName"
                  placeholder="请输入处置措施名称"
                  autocomplete="off"
                  style="width: 284px"
                ></el-input> -->
              </div>
            </el-col>
          </el-row>

          <!-- 序号 -->
          <el-row style="margin-top: 30px">
            <el-col :span="4">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>处置序号</span>
                </div>
                <div
                  v-for="(Disposal, index) in Activity.Disposalserialnumber"
                  :key="index"
                >
                  <div
                    :style="{
                      display: 'flex',
                      lineHeight: '36px',
                      justifyContent: 'space-between',
                      color:
                        Activity.currentDisposal === index
                          ? '#038ff3'
                          : 'initial',
                      cursor: 'pointer',
                    }"
                    @click="showCard(disposalIndex, index)"
                  >
                    NO.{{ index + 1 }}
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="19" style="margin-left: 30px">
              <el-card v-if="isCardVisible" class="box-card">
                <div
                  v-for="(Disposal, index) in Activity.Disposalserialnumber"
                  :key="index"
                  v-show="Activity.currentDisposal === index"
                >
                  <!-- 预案处理步骤和处理人员内容 -->
                  <div style="display: flex">
                    <div
                      style="
                        line-height: 36px;
                        font-size: 15px;
                        color: #606266;
                        font-weight: 700;
                        margin-right: 10px;
                      "
                    >
                      预案处理步骤:
                    </div>
                    <div style="line-height: 35px; width: 269px">
                      {{ Disposal.DealStep }}
                    </div>
                    <!-- <el-select
                      disabled
                      v-model="Disposal.DealStep"
                      placeholder="请选择预案处理步骤"
                    >
                      <el-option
                        v-for="item in Planprocessingstepsliest"
                        :key="item"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select> -->
                  </div>

                  <div
                    style="margin-top: 30px"
                    v-for="(item, itemIndex) in Disposal.divContents"
                    :key="itemIndex"
                  >
                    <div style="display: flex">
                      <div
                        style="
                          line-height: 36px;
                          font-size: 15px;
                          color: #606266;
                          font-weight: 700;
                          margin-right: 10px;
                        "
                      >
                        处理人员:
                      </div>
                      <div style="line-height: 35px; width: 269px">
                        {{ item.DealExecutor }}
                      </div>
                      <!-- <el-select
                        disabled
                        v-model="item.DealExecutor"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="person in Processingpersonnelliest"
                          :key="person"
                          :label="person"
                          :value="person"
                        ></el-option>
                      </el-select> -->
                    </div>
                    <div
                      style="
                        display: flex;
                        flex-wrap: wrap;
                        width: 1270px;
                        margin-left: 30px;
                      "
                    >
                      <div
                        v-for="(content, contentIndex) in item.contents"
                        :key="contentIndex"
                        style="
                          display: flex;
                          flex-wrap: wrap;
                          margin-top: 25px;
                          width: 344px;
                          margin-left: 6px;
                        "
                      >
                        <div style="line-height: 34px">
                          {{ contentIndex + 1 }}.
                        </div>
                        <el-input
                          type="textarea"
                          :rows="1"
                          placeholder="请输入处置内容"
                          v-model="content.value"
                          @input="
                            updateContent(
                              disposalIndex,
                              index,
                              itemIndex,
                              contentIndex
                            )
                          "
                          style="margin-left: 20px; width: 178px"
                        ></el-input>
                      </div>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-card>
    </el-form>
  </div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import {
  getLists,
  insertData,
  deletelist,
  ModifierList,
} from "../../api/Genericmethods/GeneralQuery.js";
// import Concretestep from "./concretestep.vue";
export default {
  // eslint-disable-next-line vue/no-unused-components
  // components: { Concretestep },
  props: {},
  data() {
    return {
      loading: true,
      size: "",
      ActivityAreaList: [
        {
          zoneofaction: "",
          AccidentArea: "",
          MeasureName: "",
          // 左边的选中状态
          currentDisposal: 0,
          Disposalserialnumber: [
            {
              DealStep: "", //预案处理步骤
              divContents: [
                {
                  DealExecutor: "", //处理人员
                  contents: [{ value: "" }],
                },
              ],
            },
          ], // 存储处置信息的数组
        },
      ],
      isCardVisible: true,
      // 处理人员列表
      Processingpersonnelliest: [
        "第一目击者",
        "现场人员",
        "现场调度",
        "安全人员",
      ],
      // 预案处理步骤列表
      Planprocessingstepsliest: [
        "发出警报",
        "第一时间处置",
        "指挥救援",
        "现场急救",
        "善后处置",
      ],
      // 响应等级下拉框
      Responselevellist: [
        {
          grade: "III级",
          name: "班组级",
        },
        {
          grade: "II级",
          name: "公司级",
        },
        {
          grade: "I级",
          name: "社会级",
        },
      ],
      Listofaccidenttypes: [
        "火灾",
        "爆炸",
        "熔融金属爆炸",
        "煤粉粉尘爆炸",
        "锅炉爆炸",
        "容器爆炸",
        "起重伤害",
        "灼烫伤害",
        "化学灼伤",
        "机械伤害",
        "触电伤害",
        "物体打击",
        "车辆伤害",
        "坍塌",
        "淹溺",
        "高温危害",
        "低温冻伤",
        "噪声",
        "中毒窒息",
        "粉尘危害",
        "电离辐射",
        "自然灾害",
      ],
      // 预案类型下拉框
      PlanTypeDropdownBox: ["现场处置方案", "专项应急预案", "综合应急预案"],
      // 可能联动范围下拉框
      Listofpossiblelinkageranges: [
        "ERT集结",
        "区域疏散",
        "全员疏散",
        "周边企业",
        "外部专业救援队伍",
        "无",
      ],
      // 表单参数
      form: {
        AccidentArea: "", //事故发生区域
        AccidentPoint: "", //事故发生设备
        AccidentRisk: "", //事故风险
        AccidentScope: "", //事故发生范围（全厂/某产线）
        AccidentType: "", //事故类型
        AccidentWarnDeal: "", //事故预警措施
        AccidentWarnSign: "", //事故预警征兆
        Gradename: "", //等级名称
        Notes: "", //注意事项
        PlanName: "", //预案名称
        PlanType: "", //预案类型
        PossibleEffectScope: "", //可能影响范围
        PossibleMatter: "", //可能衍生事故
        PossibleOccurArea: "", //可能发生区域/地点
        PossibleSeverity: "", //可能严重程度
        PossibleTime: "", //可能发生时间
        Possiblelinkage: "", //可能联动范围
        Responselevel: "", //响应等级
      },
      rules: {
        PlanName: [
          { required: true, message: "请输入预案名称", trigger: "blur" },
          { validator: this.checkPlanNameUnique, trigger: "blur" },
        ],
        PlanType: [
          { required: true, message: "预案类型不能为空", trigger: "blur" },
        ],
        postSort: [
          { required: true, message: "岗位顺序不能为空", trigger: "blur" },
        ],
      },
    };
  },
  // 计算属性 类似于data概念
  computed: {
    paginatedItems() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.filteredItems.slice(startIndex, endIndex);
    },
    totalPages() {
      return Math.ceil(this.filteredItems.length / this.pageSize);
    },
    // 事故类型下拉框
    selectedOptions: {
      get() {
        // 检查是否为空字符串，如果是，则返回空数组
        if (this.form.AccidentType === null) {
          return [];
        }
        // 否则，将以逗号分隔的字符串转换为数组
        return this.form.AccidentType.split(",");
      },
      set(value) {
        // 将选中的值组合为逗号分隔的字符串
        this.form.AccidentType = value.join(",");
      },
    },
    // 可能联动范围下拉框
    rangeOptions: {
      get() {
        // 检查是否为空字符串，如果是，则返回空数组
        if (this.form.Possiblelinkage === null) {
          return [];
        }
        // 否则，将以逗号分隔的字符串转换为数组
        return this.form.Possiblelinkage.split(",");
      },
      set(value) {
        // 将选中的值组合为逗号分隔的字符串
        this.form.Possiblelinkage = value.join(",");
      },
    },
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    showCard(ActivityIndex, index) {
      // 把index提到数组对象里面控制左边的切换
      this.ActivityAreaList[ActivityIndex].currentDisposal = index;
      this.isCardVisible = true;
    },
    // 获取具体步骤列表
    Listofspecificsteps() {
      getLists("EmergPlan_SiteRspMrs_Deal")
        .then((data) => {
          const sortedData = data.sort((a, b) => {
            return a.DealCode - b.DealCode;
          });
          let activityAreaListByPlan = [];
          sortedData.forEach((item) => {
            let planItem = activityAreaListByPlan.find(
              (plan) => plan.PlanName === item.PlanName
            );

            if (planItem) {
              let areaItem = planItem.ActivityAreaList.find(
                (area) => area.AccidentArea === item.AccidentArea
              );
              let zoneofaction = "";

              if (item.AccidentArea) {
                zoneofaction = "区域";
              } else if (item.AccidentPoint) {
                zoneofaction = "设备";
              }

              if (areaItem) {
                let stepItem = areaItem.Disposalserialnumber.find(
                  (step) => step.DealStep === item.DealStep
                );

                // 检查stepItem是否存在，若不存在，则创建新的stepItem
                if (!stepItem) {
                  let newStepItem = {
                    DealStep: item.DealStep,
                    divContents: [],
                  };

                  areaItem.Disposalserialnumber.push(newStepItem);
                  stepItem = newStepItem;
                }

                let contents = [];
                for (let i = 1; i <= 10; i++) {
                  let dealContent = item["DealContent" + i];
                  if (dealContent) {
                    contents.push({ value: dealContent });
                  }
                }

                let executorExists = stepItem.divContents.some(
                  (content) => content.DealExecutor === item.DealExecutor
                );

                // 检查执行人是否存在，若不存在，则创建新的执行人对象
                if (!executorExists) {
                  let newExecutorItem = {
                    DealExecutor: item.DealExecutor,
                    contents: [],
                  };

                  stepItem.divContents.push(newExecutorItem);
                }

                // 将内容添加到对应的执行人对象中的contents数组中
                let executorItem = stepItem.divContents.find(
                  (content) => content.DealExecutor === item.DealExecutor
                );
                executorItem.contents.push(...contents);
              } else {
                let contents = [];
                for (let i = 1; i <= 10; i++) {
                  let dealContent = item["DealContent" + i];
                  if (dealContent) {
                    contents.push({ value: dealContent });
                  }
                }

                let newStepItem = {
                  DealStep: item.DealStep,
                  divContents: [
                    {
                      DealExecutor: item.DealExecutor,
                      contents: contents,
                    },
                  ],
                };

                let newAreaItem = {
                  zoneofaction: zoneofaction,
                  AccidentArea: item.AccidentArea || item.AccidentPoint,
                  MeasureName: item.MeasureName,
                  currentDisposal: 0,
                  Disposalserialnumber: [newStepItem],
                };

                planItem.ActivityAreaList.push(newAreaItem);
              }
            } else {
              let zoneofaction = "";

              if (item.AccidentArea) {
                zoneofaction = "区域";
              } else if (item.AccidentPoint) {
                zoneofaction = "设备";
              }

              let contents = [];
              for (let i = 1; i <= 10; i++) {
                let dealContent = item["DealContent" + i];
                if (dealContent) {
                  contents.push({ value: dealContent });
                }
              }

              let newStepItem = {
                DealStep: item.DealStep,
                divContents: [
                  {
                    DealExecutor: item.DealExecutor,
                    contents: contents,
                  },
                ],
              };

              let newAreaItem = {
                zoneofaction: zoneofaction,
                AccidentArea: item.AccidentArea || item.AccidentPoint,
                MeasureName: item.MeasureName,
                currentDisposal: 0,
                Disposalserialnumber: [newStepItem],
              };

              let newPlanItem = {
                PlanName: item.PlanName,
                PlanType: item.PlanType,
                ActivityAreaList: [newAreaItem],
              };
              activityAreaListByPlan.push(newPlanItem);
            }
          });
          this.isshows(activityAreaListByPlan);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 判断是否一样
    isshows(list) {
      let filteredArray = list.filter((item) => {
        return item.PlanName === this.$route.query.row.PlanName;
      });
      for (let index = 0; index < filteredArray.length; index++) {
        const element = filteredArray[index];
        this.ActivityAreaList = element.ActivityAreaList;
        this.loading=false
      }
    },
    // 响应等级
    updateGradeName() {
      const selectedGrade = this.form.Responselevel;
      const selectedLevel = this.Responselevellist.find(
        (item) => item.grade === selectedGrade
      );
      this.form.Gradename = selectedLevel ? selectedLevel.name : "";
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.form = { ...this.$route.query.row };
    this.Originalarray = this.$route.query.row;
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.Listofspecificsteps();
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
.box-card {
  margin-top: 3%;
}

::v-deep .el-form-item__label {
  text-align: left;
}
::v-deep .el-descriptions-item__label:not(.is-bordered-label) {
  font-weight: 900;
}
::v-deep
  .el-descriptions--medium:not(.is-bordered)
  .el-descriptions-item__cell {
  height: 36px;
}
</style>
